<template>
  <!-- 小弹框 width:500,height:0.3,top:15%  -->
  <!-- 中弹框 width:800,height:0.5,top:10% -->
  <!-- 大弹框 width:1060,height:0.76,top:5% -->
  <!-- 超大弹框 width:1460,height:0.76,top:5% -->

  <div class="Control-1 mechanism_dialogS closure" id="comcn small">
    <el-dialog
      width="1060px"
      title="桩基检测数据"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      element-loading-spinner="el-icon-loading"
      v-dialogDrag
      :visible.sync="visible"
      @close="closeDialog"
      :append-to-body="true"
      top="5%"
    >
      <div
        class="dialogBody common commonClassDialog moduleDialog"
        id="longLable"
        :style="{ height: dialogHeight }"
        style="width: 100%"
      >
        <div style="overflow-y: auto; margin-bottom: 20px">
          <div
            class="tab"
          >
            <div
              v-for="(data, index) in typeData"
              :key="data.value"
              @click="changeType($event, index)"
            >
              <div
                class="btn"
                :style="{
                  color:
                    data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                  background: data.show === true ? '#E0EFFF' : '#fff',
                }"
              >
                {{ data.text }}
              </div>
            </div>
          </div>

          <div
            class="publicForm"
            style="height: 500px"
            v-show="typeData[0].show "
          >
            <publicForm
              ref="publicForm"
              lableWidth="130px"
              :formObj="formObj"
              :formData="formData"
            >
            </publicForm>
          </div>
          <div
            class="publicForm"
            v-show="typeData[1].show "
          >
          <tableData
              height="100%"
              :config="table_config"
              :dataList="tableData"
            />
          </div>
          <div
            class="publicForm"
            style="display: flex;
 flex-direction: column;"
            v-if="typeData[2].show "
          >
          <div  v-for="(item,index) in graphDataLists" :key="index">
            <div class="title" style="text-align: center;">{{item.section}}</div>
            <div><echarts :commonData="item"></echarts></div>
          </div>
          <!-- <div class="curveBox"> -->
            <imgBox :srcPath="graphfileLists" :titleBox="tableData"></imgBox>
            <!-- <img :src="item.fGraphfile"  v-for="item in tableData" :key="item.fId"> -->
          <!-- </div> -->
          </div>
          <div
            class="publicForm"
           
            v-if="typeData[3].show "
          >
       
         <div style="display: flex;"> <imgBox :srcPath="polarogramfileLists" :titleBox="tableData"></imgBox></div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script src="./index.js"></script>
<style lang="less" scoped>
@import "./index.less";
</style>
